<template>
	<view class="content">
		<!-- 顶部搜索 -->
		<view class="top">
			<view class="top-left">
				<span>杭州市</span>
			</view>
			<view class="top-right">
					<input class="uni-input sousuo" placeholder="你想住在哪儿">
			</view>
		</view>
	
		<!-- banner -->
		<view class="uni-margin-wrap banner">
			<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="true"
				:duration="duration">
				<swiper-item v-for="(item, index) in swiperList">
					<view class="swiper-item uni-bg-red">
						<image :src="item.image" class="banner-image"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 金刚区 -->
		<jinGang :navList="navList"></jinGang>
		
		<!-- 公告栏 -->
		<view class="gonggao">
			<uni-section title="文字滚动" subTitle="使用 scrollable 属性使通告滚动,此时 single 属性将失效,始终单行显示" type="line">
				<uni-notice-bar show-icon scrollable
					text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
			</uni-section>
		</view>
		
		<!-- 商品列表 -->
		<goods :navList="navList"></goods>
		
		
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [
					{
						image: '/static/img/index/swiper/swiper2.png',
					    title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: '/static/img/index/swiper/swiper.jpg',
					    title: '身无彩凤双飞翼，心有灵犀一点通'
					},
				],
				navList:[
				   {name:"整租",src:"/static/img/index/cover_2022/index_cover1.png",type:"0"},
				   {name:"合租",src:"/static/img/index/cover_2022/index_cover2.png",type:"1"},
				   {name:"避坑指南",src:"/static/img/index/cover_2022/index_cover3.png",url:"/pages/center/tips"},
				   {name:"委托房源",src:"/static/img/index/cover_2022/index_cover4.png",type:"2"}
				],
			}
		},
		onLoad() {
            this.getGoods();
			console.log(11);
		},
		methods: {
			getGoods(){
				this.$http.get('/api/houseApi/findHouseRoomList',{pid:0}).
				then(function (response) {
				    //这里只会在接口是成功状态返回
					console.log(111);
				}).catch(function (error) {
				    //这里只会在接口是失败状态返回，不需要去处理错误提示
				    console.log(error);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
	    background: #f3f4f6;
	}
	
	.top{
		background-color: #ffffff;
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
        align-items: center;
		margin-top: 25rpx;
		
	}
	
	.top-left{
		width: 20%;
		padding: 10rpx;
	}
	.top-right{
		width: 80%;
	}
	
	.sousuo{
		height: 60rpx;
		border-radius: 50rpx;
		background-color: rgb(242, 242, 242);
		text-align: center;
		margin-right: 10rpx;
	}
	
	.banner{
		padding: 5rpx;
		.banner-image{
			height: 365rpx;
			width: 100%;
			box-sizing: border-box;
		}
	}
	
	.gonggao{
		padding: 30rpx 5rpx;
	}
</style>
